<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('mine.myGroup')}}</block>
		</cu-custom>
		<view class="grid gap margin-ht padding-bottom-lg" style="margin-top: 20rpx;">
			<view class="bg-white radius-xs padding" v-for="(item,index) in dataList" :key="index"
				@tap.stop="helper.routerNav('/pages/group/groupDetail',{id:item.id})">
				<view class="padding-bottom flex align-center u-border-bottom">
					<image :src="helper.handleImage(userInfo.avatar)" class="flex-shrink round"
						style="width: 79rpx;height: 79rpx;" mode="aspectFill" />
					<view class="margin-left flex flex-direction flex-sub">
						<text class="text-df font-bold text-black margin-bottom-xs">{{userInfo.nickname}}</text>
						<image src="@/static/img/sexType.png" style="width: 35rpx;height: 35rpx;" />
					</view>
				</view>
				<view class="grid gap-sm padding-top">
					<text class="text-lg font-bold text-black">{{item.title}}</text>
					<text class="text-df font-400 text-black">{{item.content}}</text>
					<view class="" v-if="item.images.length" style="width:100%;display: flex;flex-wrap: wrap;">
						<image :src="helper.handleImage(imgItem)" style="height: 215rpx;width:33.33%;"
							v-for="(imgItem,imgIndex) in item.images" :key="imgIndex" mode="aspectFill" />

						<view v-if="item.images.length<9" style="width:33.33%;height: 215rpx;position: relative;">
							<!-- <DomVideoPlayer v-if="item.video_files" :src="helper.handleImage(item.video_files)"
									ref="domVideoPlayer" autoplay loop controls muted :autoplay="true" /> -->
							<hello v-if="item.video_files" :src="helper.handleImage(item.video_files)" class="video">
							</hello>
							<view v-if="item.video_files"
								@tap.stop="helper.routerNav('/pages/group/groupDetail',{id:item.id})" class="zzContent"
								style="background-color: transparent;">
							</view>
						</view>
					</view>




					<view class="flex justify-end">
						<view class="flex align-center margin-left-lg" @tap.stop="handleEdit(item.id)">
							<u-icon size="25" name="edit-pen-fill"></u-icon>
							<text class="margin-left-sm text-gray text-df font-400">{{$t('filed.edit')}}</text>
						</view>
						<view class="flex align-center margin-left-lg" @tap.stop="bbsDel(item.id,index)">
							<image src="@/static/img/addressDel.png" style="width: 30rpx;height: 30rpx;"></image>
							<text class="margin-left-sm text-gray text-df font-400">{{$t('filed.del')}}</text>
						</view>
					</view>
				</view>
			</view>
			<section class="empty" v-if="!dataList.length">
				<u-empty mode="list" :text="$t('list.empty')" />
			</section>
		</view>
	</view>
</template>

<script>
	import {
		myArticle,
		getInfo,
		bbsDel
	} from '@/apis'
	export default {
		data() {
			return {
				page: 1,
				dataList: [],
				userInfo: {}
			}
		},
		onShow() {
			this.page = 1
			this.dataList = []
			this.myArticle()
			this.getInfo()
		},
		onReachBottom() {
			this.page++
			this.myArticle()
		},
		methods: {
			async getInfo() {
				const res = await getInfo()
				this.userInfo = res
			},
			async myArticle() {
				const res = await myArticle({
					page: this.page
				})
				res.data.map(item => {
					item.images = item.images.split(',')
				})
				this.dataList = this.dataList.concat(...res.data)
			},
			async bbsDel(id, index) {
				await bbsDel({
					id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.dataList.splice(index, 1)
				})
			},
			handleEdit(id) {
				uni.navigateTo({
					url: `/pages/mine/editGroup?groupId=${id}`
				})
			},
		}
	}
</script>

<style>
	.zzContent {
		width: 100%;
		height: 215rpx;
		// border-radius: 20rpx;
		background-color: rgba(0, 0, 0, 0.7);
		// z-index: 999;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>